<script>
import { h, ref } from 'vue'
import CodeShow from './CodeShow.vue'
import { codeTextHfn } from './codetext';

export default {
  components: {
    CodeShow
  },
  props: {
    msg: String
  },
  setup(props) {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    
    // 返回渲染函数
    return () => h('div', [
      h('h2', { class: 'title' }, props.msg),
      h('button', {
        type: 'button',
        onClick: increment
      }, `count is: ${count.value}`),
      h(CodeShow, {
        codeText: codeTextHfn
      })
    ])
  }
}
</script>

<style scoped>
.title {
  color: red;
}
</style>